<template>
	<div class="all">
		<div class="container">
			<vue-scroll :ops="scollOptions">
				<div class="create-developer-table">
					<div class="header">
						<el-form
							slot="body"
							:inline="true"
							:model="searchForm"
							label-position="left"
							class="search-form"
						>
							<el-form-item
								label="类别名称:"
								class="category_name"
							>
								<el-input
									v-model="searchForm.category_name"
									placeholder="请输入"
									clearable
									size="mini"
								/>
							</el-form-item>
							<el-form-item label="">
								<el-button
									type="primary"
									size="mini"
									@click.native="getTableData"
								>
									搜索
								</el-button>
								<el-button
									type="primary"
									size="mini"
									@click.native="add"
								>
									新增
								</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div class="developerTable">
						<page-table
							ref="pageTable"
							:table-data="table.tbodyData"
							:header-data="table.headerData"
							:page-data="pageData"
							cell-key=""
							@handle-current-change="handleCurrentChange"
							@handle-size-change="handleSizeChange"
						>
							<template
								slot="operate"
								slot-scope="scope"
							>
								<span>
									<a
										class="text"
										@click="edit(scope.data)"
										>编辑</a
									>
									<a
										class="text"
										@click="delet(scope.data)"
										>删除</a
									>
								</span>
							</template>
						</page-table>
					</div>
				</div>
			</vue-scroll>
		</div>
		<el-dialog
			:title="title"
			:visible.sync="dialogVisible"
			width="20%"
			:before-close="handleClose"
		>
			<el-form :inline="true">
				<el-form-item label="类别名称：">
					<el-input
						v-model="obj.category_name"
						placeholder="请输入类别名称"
					></el-input>
				</el-form-item>
			</el-form>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					@click="dialogVisible = false"
					size="mini"
					>取 消</el-button
				>
				<el-button
					type="primary"
					@click="onSubmit"
					size="mini"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import PageTable from "@/components/table/PageTable";
	import {
		getCategoryNameList,
		addCategory,
		updateCategory,
		deletCategory,
	} from "@/api/developerServe/index";
	import { formatDateTime } from "@/utils/tools";
	export default {
		components: {
			PageTable,
		},
		data() {
			return {
				searchForm: {
					category_name: "",
				},
				partnerNameAll: [], // 所有的接入方
				table: {
					headerData: [
						{
							prop: "id",
							label: "类别ID",
							align: "center",
							headerAlign: "center",
						},
						{
							prop: "category_name",
							label: "类别名称",
							align: "center",
							headerAlign: "center",
						},
						{
							prop: "create_time",
							label: "创建时间",
							align: "center",
							headerAlign: "center",
						},
						{
							prop: "update_time",
							label: "修改时间",
							align: "center",
							headerAlign: "center",
						},
						{
							label: "操作",
							align: "center",
							headerAlign: "center",
							slot: "operate",
						},
					],
					tbodyData: [],
					handdleId: "",
				},
				pageData: {
					// 翻页数据
					total: 0, // 总条数
					page: 1,
					pageSize: 10,
					totalPage: 0, // 总页数
				},
				params: {
					page: 1,
					pageSize: 10,
				},
				/**
				 * 滚动条样式
				 */
				scollOptions: {
					scrollPanel: {
						scrollingX: false,
						scrollingY: true,
					},
					vuescroll: {
						mode: "native",
						sizeStrategy: "percent",
						detectResize: true,
						zooming: false,
					},
					bar: {
						onlyShowBarOnScroll: false,
						background: "#dedede",
						opacity: 1,
					},
				},
				dialogVisible: false,
				obj: {},
				userData: {},
				title: "新增",
			};
		},
		created() {},
		mounted() {
			this.userData = localStorage.getItem("userData");
			this.userData = JSON.parse(this.userData);
			if (this.userData.name == "admin") {
				this.getTableData();
			}
		},
		methods: {
			handleClose(done) {
				this.dialogVisible = false;
			},
			async onSubmit() {
				let res;
				if (this.title == "编辑") {
					res = await updateCategory({
						id: this.obj.id,
						category_name: this.obj.category_name,
					});
				} else {
					res = await addCategory({
						...this.obj,
					});
				}
				this.$message.success("操作成功！");
				this.handleClose();
				this.getTableData();
			},
			delet(obj) {
				this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(async () => {
						await deletCategory({
							id: obj.id,
						});

						this.$message({
							type: "success",
							message: "删除成功!",
						});
						this.getTableData();
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			edit(obj) {
				this.obj = obj;
				this.title = "编辑";
				this.dialogVisible = true;
			},
			add() {
				this.obj = {
					category_name: "",
				};
				this.title = "新增";
				this.dialogVisible = true;
			},
			/** 获取列表数据 */
			getTableData() {
				this.searchForm.page = this.pageData.page;
				this.searchForm.pageSize = this.pageData.pageSize;
				return getCategoryNameList({
					...this.searchForm,
				})
					.then((res) => {
						this.table.tbodyData = res.data.map((item) => {
							return {
								...item,
								create_time: formatDateTime(item.create_time),
								update_time: formatDateTime(item.update_time),
							};
						});
						this.pageData = {
							...this.pageData,
							total: res.count,
							totalPage:
								res.count % this.pageData.pageSize === 0
									? res.count / this.pageData.pageSize
									: parseInt(res.count / this.pageData.pageSize) + 1,
						};
					})
					.catch(() => {});
			},
			/** 跳转至第几页的操作 */
			handleCurrentChange(val) {
				this.params.page = val;
				this.getTableData();
			},
			/** 每页条数改变 */
			handleSizeChange(val) {
				this.pageData.pageSize = val;
				this.getTableData();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.all {
		width: 100%;
		height: 100%;

		.container {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			.create-developer-table {
				background-color: #ffffff;
				padding: 15px;
				.header {
					margin-bottom: 20px;
					line-height: 60px;
					/deep/ .el-form {
						.el-form-item__content {
							vertical-align: middle;
							.el-range-editor.el-input__inner {
								height: 28px;
								line-height: 28px;
								vertical-align: middle;
								.el-range__icon,
								.el-range-separator,
								.el-range__close-icon {
									line-height: 23px;
								}
							}
						}
					}
				}
				.developerTable {
					.text {
						cursor: pointer;
						color: #3179d6;
						margin: 0 5px;
					}
				}
			}
			/deep/ .el-dialog {
				width: 32%;
			}
		}
	}
	.commonPopup {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba($color: #000000, $alpha: 0.6);
	}
	.showPopup {
		right: 0px;
	}
	.hidePopup {
		right: -550px;
	}
</style>
